<template>
	<view>
		<view>
			<form>
				<view class="cu-form-group">
					<text class="title">设备编号</text>
					<input v-model="equipNo" confirm-type="search" @confirm="onInput" focus="true" class="input" type="text"
					 placeholder="扫描或输入条码" />
					<view class='cuIcon-scan' @tap="scanCode" style="transform: scale(2,2);"></view>
				</view>
				<view class="cu-form-group">
					<text class="title">设备名称</text>
					<view class="txt">{{description}}</view>
				</view>
				<picker @change="bindTypeChange" :value="indexType" :range="typePickerList">
				    <view class="cu-form-group">
				    	<text class="title">故障类别</text>
				    	<text v-if="indexType == -1" class="cuIcon-right"></text>
				    	<view v-else>{{typePickerList[indexType]}}</view>
				    </view>
				</picker>
				<picker @change="bindPriorityChange" :value="indexPriority" :range="priorityPickerList">
				    <view class="cu-form-group">
				    	<text class="title">紧急程度</text>
				    	<text v-if="indexPriority == -1" class="cuIcon-right"></text>
				    	<view v-else>{{priorityPickerList[indexPriority]}}</view>
				    </view>
				</picker>

				<view class="uni-form-item uni-column">
					<view class="title"><text>故障描述</text></view>
					<textarea placeholder="请输入详细故障描述" class="feedback-textare" name="defect" v-model="defect" />
					</view>

				<view class="feedback-body feedback-uploader">
				    <view class="uni-uploader">
				        <view class="uni-uploader-head">
				            <view class="uni-uploader-title">故障图片</view>
				        </view>
				        <view class="uni-uploader-body">
				            <view class="uni-uploader__files">
				                <block v-for="(image,index) in imageList" :key="index">
				                    <view class="uni-uploader__file" style="position: relative;">
				                        <image class="uni-uploader__img"  :src="image" @tap="previewImage"></image>
				                        <view class="close-view" @click="close(index)">x</view>
				                    </view>
				                </block>
				                <view class="uni-uploader__input-box" v-show="imageList.length < 8">
				                	<view class="uni-uploader__input" @tap="chooseImg"></view>
				                </view>
				            </view>
				        </view>
				    </view>
				</view>

				<view class="padding flex flex-direction">
					<button class="cu-btn bg-green lg"  @click="send">提交</button>
				</view>
			</form>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import {ACCESS_TOKEN} from '@/common/util/constants.js'
	export default {
		data() {
			return {
				msgContents:['组装','焊接','切割','钣金','焊装','涂装','总装'],
				equipNo:'',//设备编号
				description:"",//设备名称
				time:"",
				type:"工序检验",
				List:[],//字典
				//故障类别
				typePickerList: [],
				indexType: 0,
				//紧急程度
				priorityPickerList: [],
				indexPriority:0,
				defect:'',//故障描述
				imageList:[],//图片
				imgurl:'',
			}
		},
		onShow() {
			this.ls_baseUrl = uni.getStorageSync('ls_baseUrl')
			console.log(this.ls_baseUrl)
			console.log(uni.getStorageSync(ACCESS_TOKEN))
			this.dictList();
		},
		onLoad() {
			var date =new Date();
			var year = date.getFullYear();
			var month= date.getMonth()+1;
			var day= date.getDate();
			var currentDate = year+"-"+month+"-"+day;
			this.time=currentDate;
		},
		methods: {
			bindTypeChange(e) {
				this.indexType = e.target.value
			},
			bindPriorityChange(e) {
				this.indexPriority = e.target.value
			},
			scanCode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						console.log('res.result='+res.result)
						that.equipNo = res.result;
						let e = {};
						e.detail = {};
						e.detail.value = res.result;
						that.onInput(e);
					}
				});
			},
			onInput(e) {
				console.log(e)
				console.log('000')
				console.log(this.equipNo)
				let url = '/mcEquipment/mcEquipment/list'
				this.$http.get(url, {
					params: {
						equipNo: this.equipNo,
					}
				}).then(res => {
					if (res.data.success) {
						if (res.statusCode == "200") {
							this.description = res.data.result.records[0].description
						} else {
							// 数据获取失败
						}
							
					}
				}).catch(err => {
					console.log(err);
				});
			},
			close(e){
			    this.imageList.splice(e,1);
			},
			chooseImg() { //选择图片
			    uni.chooseImage({
					count:1,
			        sourceType: [ "album","camera"],
			        sizeType: ['compressed'],
			        success: res => {
			            this.imageList = res.tempFilePaths;
						uni.uploadFile({
							header: {
								"X-Access-Token": uni.getStorageSync(ACCESS_TOKEN),
								"tenant-id":uni.getStorageSync("tenantId")
							},
						    url: this.ls_baseUrl+'/sys/common/upload', //接口地址
							
						    filePath: this.imageList[0],
						    name: 'file',
						    formData: {
						        'biz': 'temp'  ,// 上传附带参数
						    },
						    success: (res) => {
								this.imgurl = JSON.parse(res.data).message;
						    },
						});
						
			        },
					fail(err) {
						console.log(err)
					}
			    })
			},
			previewImage() { //预览图片
			    uni.previewImage({
			        urls: this.imageList
			    });
			},
			send(){
				if(this.equipNo==''){
					this.$tip.alert('请输入设备编号');
					return;
				}
				if(this.defect==''){
					this.$tip.alert('请输入故障描述');
					return;
				}
				 let url = '/mcEquipRepair/mcEquipRepair/add'
				 this.$http.post(url, {
					 "date":this.time,
					 "equipNo":this.equipNo,
					 "description":this.description,
					 "type":this.List[1][this.indexType].value,
					 "priority":this.List[2][this.indexPriority].value,
					 "defect":this.defect,
					 "picture":this.imgurl,
						
				 },{emulateJSON: true}).then(res => {
				 	if (res.data.success) {
				 		if (res.statusCode == "200") {
				 			uni.showToast({
				 				// icon: 'none',
				 				title: '保存成功'
				 			});
				 		}
				 		this.equipNo='';
				 		this.description='';
						this.defect='';
				 		this.imageList=[];
				 		this.imgurl='';
				 		
				 	}
				 	
				 }).catch(err => {
				 	console.log(err);
				 });
		    },
		    dictList() {
				this.List = [];
				this.typePickerList = [];
				this.priorityPickerList = [];
		    	let url = '/dict/getOptionsByList'
		    	this.$http.post(url, 
		    		[
		    					{
		    					  remark:'1',
		    					  code:'mc_repair_type',//故障类别
		    					},
		    					{
		    					  remark:'2',
		    					  code:'priority',//紧急程度
		    					},
		        	]
		    	).then(res => {
		    		if (res.data.success) {
		    			if (res.statusCode == "200") {
		    				this.List = res.data.result;
		    				this.List[1].forEach((e) => {
		    					this.typePickerList.push(
		    						e.text,
		    					);
		    				});
		    				this.List[2].forEach((e) => {
		    					this.priorityPickerList.push(
		    						e.text,
		    					);
		    				});
		    			} else {
		    				// 数据获取失败
		    			}
		    
		    		}
		    	}).catch(err => {
		    		console.log(err);
		    	});
		    
		    },
}
}
</script>
<style>
	page {
	    background-color: #EFEFF4;
	}
	.head {
		display: flex;
		justify-content: center;

	}
	.floor-one {
		width: 90%;
		margin-left: 5%;
		border: solid 1px blue;
	}

	.lab {
		width: auto;
		font-size: 125%;
		border-bottom: #C0C0C0 1px solid;
	}
	.feedback-textare{
		background-color:#FFFFFF;
	}
    .input-view {
        font-size: 28upx;
    }
    .close-view{
        text-align: center;
		line-height:14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #FF5053;
		color: #FFFFFF;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
    }
	.title{
		font-size: 125%;
	}
	.cu-form-group {
		width: 100%;
		background-color: #ffffff;
		padding: 1upx 30upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
		
	}
	.txt{
		text-align: right;
	}
	.cuIcon-right{
		color: #CBCFD5;
	}
</style>
